<template>
    <div class="body">
      <el-button @click="add_warehouse" style="margin-left: 15px"
        >新增材料规格</el-button
      >
      <el-table :data="productList" border>
        <el-table-column prop="name" label="材料名称"> </el-table-column>
        
  
        <el-table-column label="操作" width="260" fixed="right">
          <template slot-scope="scope">
            <el-button
              @click="add_warehouse(scope.row)"
              type="text"
              icon="el-icon-edit"
              >编辑</el-button
            >
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              title="是否删除这条数据？"
              @confirm="del_product(scope.row)"
            >
              <el-button slot="reference" type="text" icon="el-icon-delete">
                删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          @prev-click="prev"
          @next-click="next"
          :current-page.sync="pagination.page"
          :page-size="pagination.per_page"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
      <el-dialog
        :title="title"
        :visible.sync="isProduct"
        width="30%"
        :close-on-click-modal="false"
        @close="close_dialog"
      >
          <el-row style="display: flex;align-items: center;">
            <el-col :span="4">  
                材料名称    
            </el-col>
            <el-col :span="20">
                <el-input v-model="guige.name" @input="changeValue"></el-input>     
           </el-col>
          </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close_dialog">取 消</el-button>
          <el-button type="primary" @click="addhuojia">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  <script>
  import { getMaterialSpecificationList,createMaterialSpecification,delMaterialSpecification } from "@/api/product/index";
  export default {
    data() {
      return {
        title: "",
        isProduct: false,
        productList: [],
        pagination: {
          per_page: 10,
          page: 1,
        },
        total: 0,
        guige: {
          id: "",
          name: "",
        }
      };
    },
    mounted() {
      this.getlist();
    },
    methods: {
      del_product(row){
        delMaterialSpecification({id:row.id,is_del:1}).then(res=>{
            if(res.code==200){
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.getlist();
            }else{
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          })
      },
      close_dialog(){
          this.isProduct = false;
          this.guige={
          id: "",
          name: ""
        }
      },
      addhuojia() {
        if(this.guige.name){
            createMaterialSpecification(this.guige).then(res => {
                if (res.code == 200) {
                    this.isProduct = false
                    this.$message.success('提交成功')
                    this.getlist()
                }
              })
        } else{
            this.$message('请完善材料名称~')
            return false 
        } 
        console.log(this.guige.name)
      },
      add_warehouse(row) {
          if(row){
              this.guige=row
              this.title = "编辑材料";
          }else{
              this.title = "新增材料";
          }
          this.isProduct = true;
      },
      getlist() {
        getMaterialSpecificationList(this.pagination).then((res) => {
          if (res.code == 200) {
            this.productList = res.data.data;
            this.total = res.data.total;
            console.log(this.productList)
          }
        });
      },
      handleSizeChange(val) {
        console.log(val);
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pagination.page = val;
        this.getlist();
      },
      prev() {
        this.pagination.page = this.pagination.page - 1;
        this.getlist();
      },
      next() {
        console.log("ss");
        this.pagination.page = this.pagination.page + 1;
        this.getlist();
      },
      changeValue(e){
        this.$forceUpdate()
      },
    },
    
  };
  </script>
  
  <style scoped></style>
  